<template>
  <ga-form :model="model" ref="formRef">
    <ga-row :gutter="12">
      <ga-col :span="7" v-show="podList?.length > 0">
        <ga-form-item field="podName" label="Pod名称" :style='{ marginBottom: 12 }' label-col-flex="80px">
          <ga-select v-model="model.podName">

            <ga-option v-for="item in podList" :key='item.uid' :value='item.value'>
              {{ item.value }}
            </ga-option>
          </ga-select>
        </ga-form-item>
      </ga-col>

      <ga-col :span='7'>
        <ga-form-item field="containerName" label="容器名称" :style='{ marginBottom: 12 }' label-col-flex="80px">
          <ga-select v-model="model.containerName">
            <ga-option v-for="item in containerList" :key='item.id' :value='item.value'>
              {{ item.value }}
            </ga-option>
          </ga-select>
        </ga-form-item>
      </ga-col>
      <ga-col :span='10'>
        <ga-form-item field="duration" label="时间范围" :initialValue='[dayjs(Date.now() - 5 * 60 * 1000), dayjs()]'
          :style='{ marginBottom: 12 }'>
          <ga-range-picker format="YYYY-MM-DD HH:mm:ss" showTime v-model="model.duration" />
        </ga-form-item>
      </ga-col>
    </ga-row>
  </ga-form>
</template>

<script setup>
import dayjs from 'dayjs';
import { reactive, ref, watch } from 'vue';

const props = defineProps({
  podList: {
    type: Array,
    default: () => []
  },
  containerList: {
    type: Array,
    default: () => []
  },
})
const emits = defineEmits(['get-table-data', 'on-values-change'])
const formRef = ref()
const model = reactive({
  podName: '',
  containerName: '',
  duration: [dayjs(Date.now() - 5 * 60 * 1000), dayjs()]
})
watch(() => props.podList, (podList) => {
  if (podList.length) {
    // formRef.value.setFields({podName: podList[0].value})
    model.podName = podList[0].value
  } else {
    // formRef.value.setFields({podName: undefined})
    model.podName = undefined
  }
})
watch(() => props.containerList, (containerList) => {
  if (containerList.length) {
    // formRef.value.setFields({
    //   containerName: containerList[0].value
    // })
    model.containerName = containerList[0].value
    emits('get-table-data')
  }
})
watch(() => model.podName, (newV) => {
  emits('on-values-change', { podName: newV })
})
watch(() => model.containerName, (newV) => {
  emits('on-values-change', { containerName: newV })
})
defineExpose({
  form: formRef,
  values: model
})
</script>

<style scoped lang="scss"></style>
